<template>
  <div ref="map"  :style="{ width: '107%', height: '100%' }"></div>
</template>

<script>
import "echarts/map/js/china.js";
export default {
  name: "map2",
  props: {
      mapData:{
          type:Array,
          default:[]
      },
      hoverData:{
          type:Array,
          default:[]
      },
      coordMapData:{
          type:Object,
          default:[]
      }
  },
  data() {
    return {
      chinaMap:null
    };
  },
  methods: {
    init() {
      this.chinaMap = this.$echarts.init(this.$refs.map);
      let _this = this;
      // 处理点发光数据
      let convertData = function (data) {
        let res = [];
        data.forEach((item) => {
          let geoCoord = _this.coordMapData[item.name];
          if (geoCoord) {
            res.push({
              name: item.name,
              value: geoCoord.concat(item.value),
              num: geoCoord.concat(item.num),
              id: geoCoord.concat(item.id),
            });
          }
        });
        return res;
      };
      this.chinaMap.setOption({
        // 地图渐变
        visualMap: {
          show: false,
          min: this.mapData.length?this.mapData[this.mapData.length -1].value:0,
          max: this.mapData.length?this.mapData[0].value:0,
          left: "0%",
          right: "0%",
          bottom: "0%",
          top: "-3%",
          calculable: true,
          seriesIndex: [0],
          // 0-1
          inRange: {
            color: ["#10bf56", "#e1c822", "#e97516", "#f01010"],
          },
          textStyle: {
            color: "#24CFF4",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: (p) => {
            let index = p.seriesIndex;
            let txtCon;
            if(index == 0){
              let val = p.value;
              if (!val) {
                val = 0;
              }
              txtCon = `${p.name}地区共:${val}个`;
            }else if(index == 1){
              txtCon = `${p.name}地区共:${p.value[2]}个`
            }
            return txtCon;
          },
        },
        geo: {
          map: "china",
          roam: !1,
          zoom: 1.1,
          top: 60,
          layoutSize: 460,
          label: {
            normal: {
              show: !0,
              fontSize: "14",
              color: "rgb(249, 249, 249)"
            },
            emphasis: {
                show: true,
                color: "#fff",
              },
          },
          // 这里是重点！！！
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                },
              },
              label: {
                show: false, // 隐藏文字
              },
            },
          ],
          itemStyle: {
            normal: {
                areaColor: "#14c2f9",//地图区域颜色
                borderColor: "rgba(255,255,255,.8)",//边框颜色
                borderWidth: 1,//边框宽度
                shadowBlur: 10,//图形阴影模糊大小
                shadowColor: "rgba(6,201,157,0)",//阴影颜色
                shadowOffsetX: 2,//偏移
                shadowOffsetY: 1,
            },
            emphasis: {
                areaColor: "#00fbfc",//鼠标hover颜色
                borderWidth: 1.6,//鼠标hover宽度
                shadowBlur: 25,
            },
          },
        },
        series: [
          {
            name: "地图",
            type: "map",
            geoIndex: 0,
            data: this.mapData,
            itemStyle: {
            },
          },
          {
            name: "散点",
            type: "scatter",
            coordinateSystem: "geo",
            data: convertData(this.hoverData),
            cursor: "pointer", //鼠标放上去的效果
            showEffectOn: "render",
            symbol:'pin',
            sybolSize:[50,50],
            label:{
              normal:{
                show:true,
                textStyle:{
                  color:'#fff',
                  fontSize:9
                },
                formatter(value){
                  return value.data.value[2];
                }
              }
            },
            itemStyle: {
              normal: {
                color: "#14c2f9",
                // color: "#D8BC37",
                // shadowBlur: 10,
                // shadowColor: "#333",
              },
            },
            rippleEffect:{
              brushType:"fill"
            },
            symbolSize: function (val) {
              let value = val[2];
              if (value >= _this.hoverData[1].value) {
                return 40;
              }
              return 30;
            },
            zlevel: 1
          }
        ],
      });
    },
  },
  created() {
    
  },
  mounted() {
    this.init();
  },
  watch: {
      mapData:{
          deep:true,
          handler(val){
              if(val.length){
                  if(this.chinaMap){
                      this.chinaMap.clear();
                      this.chinaMap.resize();
                  }
                  this.init();
              }
          }
      }
  },
  beforeDestroy(){
    this.chinaMap.clear();
    this.chinaMap.resize();
    window.removeEventListener("resize",this.getMapData)
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
